<template>
	<view class="content">
		<view class="region-box" :style="'height:'+ heightCot + 'upx'">
			<!-- <view class="region-check">已选区域：{{`${province.regionName != '请选择'?province.regionName:''}${city.regionName != '请选择'?city.regionName:''}${area.regionName != '请选择'?area.regionName:''}${street.regionName != '请选择'?street.regionName:''}`}}</view> -->
			<view class="title-box">
				<text class="title-txt" @click="cancel">取消</text>
				<text class="title-txt" @click="sure">确定</text>
			</view>
			<view class="map-txt">
				<text :class="showIndex== 0 ?'select':''" @click="anewSelect(0)">{{province.regionName}}</text>
				<text>-</text>
				<text :class="showIndex==1?'select':''" @click="anewSelect(1)">{{city.regionName}}</text>
				<text>-</text>
				<text :class="showIndex==2?'select':''" @click="anewSelect(2)">{{area.regionName}}</text>
				<text>-</text>
				<text :class="showIndex==3?'select':''" @click="anewSelect(3)">{{street.regionName}}</text>
			</view>
			<view class="main-box">
				<view v-if="showIndex==0" class="list-box" @click="selectPro(index,item)" v-for="(item,index) in provinceData" :key="index">
					<text>{{item.regionName}}</text>
				</view>
				<view v-if="showIndex==1" class="list-box" @click="selectCity(index,item)" v-for="(item,index) in cityData" :key="index">
					<text>{{item.regionName}}</text>
				</view>
				<view v-if="showIndex==2" class="list-box" @click="selectaArea(index,item)" v-for="(item,index) in areaData" :key="index">
					<text>{{item.regionName}}</text>
				</view>
				<view v-if="showIndex==3" class="list-box" @click="selectStreet(index,item)" v-for="(item,index) in streetsData" :key="index">
					<text>{{item.regionName}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import getData from '@/api/getData.js';
	
	export default {
		data() {
			return {
			    showIndex: 0,//地区显示
				province: {regionName:"请选择"},
				city: {regionName:"请选择"},
				area: {regionName:"请选择"},
				street: {regionName:"请选择"},
				heightCot: 0,//屏幕高度
				provinceData: '', // 当前展示的省数据
				proIndex: '',//当前省的下标
				cityData: '', // 当前展示的市数据
				cityIndex: 0,
				areaData: '', //当前展示的区数据
				areaIndex: 0,
				streetsData: '', //当前展示的区数据
				map:'',
			}
		},
		async mounted() {
			this.provinceData = await getData.get('province');
		},
		methods: {
			//组件高度自适应
			getScreen() {
				let that = this;
				uni.getSystemInfo({
					success: res => {
						that.heightCot = (res.safeArea.height * 2) / 2
					}
				})
			},
			//取消
			cancel() {				
				this.$emit('cancel')
			},
			//确定
			sure() {
				const province = this.province;//省
				const city = this.city;//市
				const area = this.area;//区县
				const street = this.street;//街镇
				const data = [province,city,area,street];
				this.$emit('sure',data)
			},
			//下拉选择
			anewSelect(num) {
				switch (num) {
					case 0:
						this.showIndex = 0;
						this.areaData = [];
						this.streetsData = [];
						this.city = {regionName:"请选择"};
						this.area = {regionName:"请选择"};
						this.street = {regionName:"请选择"}
						break;
					case 1:
						this.showIndex = 1;
						this.areaData = [];
						this.streetsData = [];
						this.area = {regionName:"请选择"};
						this.street = {regionName:"请选择"}
						break;
					case 2:
						this.showIndex = 2;
						this.streetsData = [];
						this.street = {regionName:"请选择"}
						break;
					case 3:
						break;
				}
			},
			//高德获取地区信息
			async getMap(index,type) { //index选择 type类型
				if (type=='city') {
					this.cityData = []; // 市的所有數據
					this.cityData = await getData.get('city',{regionId:this.provinceData[index].regionId});
				} else if (type=='area') {
					this.areaData = []; // 区的所有数据
					this.areaData = await getData.get('area',{regionId:this.cityData[index].regionId});
				   
				} else if (type=='streets') {
					this.streetsData = []; // 街道的所有数据
					this.streetsData = await getData.get('streets',{regionId:this.areaData[index].regionId});
				}
			},
			//选择当前省
			selectPro(index, item) {
				this.proIndex = index; // 当前省的下标
				this.province = item;
				this.getMap(index,'city');
				this.showIndex = 1;
			},
			//选择当前市
			selectCity(index, item) {
				this.city = item;
				this.cityIndex = index; // 当前市的下标
				this.getMap(index,'area');
				this.showIndex = 2;
			},
			// 区、县
			selectaArea(index, item) {
				this.area = item;
				this.areaIndex = index; // 当前区、县的下标
				this.getMap(index,'streets');
				this.showIndex = 3;
			},
			//街、镇
			selectStreet(index, item) {
				this.street = item;
			}
		}
	}
</script>

<style>
	.content{
		height: 350px;
		position: relative;
		padding: 30rpx;
	}
	.region-check{
		height: 30px;
		line-height: 30px;
		font-size: 28rpx;
		margin-bottom: 10px;
	}
	.region-box {
	  position: fixed;
	  z-index: 12;
	  top: 0;
	  left: 0;
	  right: 0;
	  background-color: #FFFFFF;
	  padding: 15px 10rpx;
	  height: 100% !important;
	}
	.region-box .title-box {
	  padding: 0 10upx 30upx 10upx;
	  display: flex;
	  justify-content: space-between;
	}
	.region-box .title-box .title-txt {
	  color: #343434;
	  font-size: 28rpx;
	}
	.region-box .title-box .title-txt:nth-child(2) {
	  color: #3CBA8B;
	}
	.region-box .map-txt {
	  display: flex;
	  justify-content: center;
	  color: #343434;
	  font-size: 30upx;
	}
	.region-box .map-txt text {
	  margin: 0 12upx;
	  border-bottom: 2upx solid #dedede;
	}
	.region-box .map-txt text:nth-child(even) {
	  border: none;
	}
	.region-box .map-txt .select {
	  color: #3CBA8B;
	  position: relative;
	}
	.region-box .map-txt .select::after {
	  content: '';
	  width: 100%;
	  height: 6upx;
	  background: #3CBA8B;
	  position: absolute;
	  left: 0;
	  bottom: -8upx;
	}
	.region-box .main-box {
	  color: #343434;
	  font-size: 30upx;
	  height: 100%;
	  overflow: auto;
	}
	.region-box .main-box .list-box {
	  display: flex;
	  flex-direction: column;
	  padding: 20upx 0;
	  border-bottom: 2upx solid #dedede;
	}

</style>
